﻿<UserControl x:Class="Chapters.Chapter05.ListBoxCustomization"
			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 xmlns:System="clr-namespace:System;assembly=mscorlib">
	<UserControl.Resources>
		<x:Array x:Key="DataSource"
				 Type="System:String">
			<System:String>Sun</System:String>
			<System:String>Sirius</System:String>
			<System:String>Canopus</System:String>
			<System:String>Rigil Kentaurus</System:String>
			<System:String>Arcturus</System:String>
			<System:String>Vega</System:String>
			<System:String>Capella</System:String>
			<System:String>Rigel</System:String>
			<System:String>Procyon</System:String>
			<System:String>Achernar</System:String>
			<System:String>Betelgeuse</System:String>
			<System:String>Hadar</System:String>
		</x:Array>
		<LinearGradientBrush x:Key="NormalBrush"
							 StartPoint="0,0"
							 EndPoint="0,1">
			<GradientStop Offset="0"
						  Color="#feffe8" />
			<GradientStop Offset="1"
						  Color="#d6dbbf" />
		</LinearGradientBrush>

		<LinearGradientBrush x:Key="SelectedBrush"
							 StartPoint="0,0"
							 EndPoint="0,1">
			<GradientStop Offset="0"
						  Color="#7fcfe1ed" />
			<GradientStop Offset="1"
						  Color="#7f7faaca" />
		</LinearGradientBrush>

		<Style x:Key="ListBoxItemStyle"
			   TargetType="ListBoxItem">
			<Setter Property="FocusVisualStyle"
					Value="{x:Null}" />
			<Setter Property="Margin"
					Value="5,5,5,0" />
			<!-- This sets the pivot point for scaling: (top-left, vertical center) -->
			<Setter Property="RenderTransformOrigin"
					Value="0,0.5" />
			<!-- We need a ScaleTransform for scaling the item on selection -->
			<Setter Property="RenderTransform">
				<Setter.Value>
					<ScaleTransform ScaleX="1"
									ScaleY="1" />
				</Setter.Value>
			</Setter>
			<!-- The ControlTemplate defines the visual tree for the ListBoxItem -->
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Border x:Name="Root"
								BorderBrush="#bdc1a3"
								BorderThickness="1"
								CornerRadius="5"
								Background="{StaticResource NormalBrush}">
							<ContentPresenter Content="{TemplateBinding Content}"
											  ContentTemplate="{TemplateBinding ContentTemplate}"
											  HorizontalAlignment="Center"
											  VerticalAlignment="Center" />
						</Border>

						<ControlTemplate.Triggers>
							<!-- Hover state -->
							<Trigger Property="IsMouseOver"
									 Value="True">
								<Setter Property="BorderBrush"
										Value="#2a849d"
										TargetName="Root" />
							</Trigger>

							<!-- Selected state -->
							<Trigger Property="IsSelected"
									 Value="True">
								<Setter Property="Panel.ZIndex"
										Value="1" />
								<Setter Property="BorderBrush"
										Value="#2a849d"
										TargetName="Root" />
								<Setter Property="Background"
										Value="{StaticResource SelectedBrush}"
										TargetName="Root" />
								<Trigger.EnterActions>
									<BeginStoryboard>
										<Storyboard>
											<DoubleAnimation To="1.25"
															 Duration="0:0:0.25"
															 Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" />
											<DoubleAnimation To="1.5"
															 Duration="0:0:0.25"
															 Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" />
										</Storyboard>
									</BeginStoryboard>
								</Trigger.EnterActions>
								<Trigger.ExitActions>
									<BeginStoryboard>
										<Storyboard>
											<DoubleAnimation To="1"
															 Duration="0:0:0.25"
															 Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" />
											<DoubleAnimation To="1"
															 Duration="0:0:0.25"
															 Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" />
										</Storyboard>
									</BeginStoryboard>
								</Trigger.ExitActions>
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<DataTemplate x:Key="ItemTemplate">
			<TextBlock Text="{Binding}"
					   FontSize="18" />
		</DataTemplate>

		<ItemsPanelTemplate x:Key="PanelTemplate">
			<WrapPanel ItemWidth="200"
					   ItemHeight="50"
					   Orientation="Vertical"
					   IsItemsHost="True"
					   Margin="0,10,0,0" />
		</ItemsPanelTemplate>
	</UserControl.Resources>
	<Grid>
		<ListBox x:Name="_listBox"
				 ItemsSource="{StaticResource DataSource}"
				 ItemContainerStyle="{StaticResource ListBoxItemStyle}"
				 ItemTemplate="{StaticResource ItemTemplate}"
				 ItemsPanel="{StaticResource PanelTemplate}"
				 HorizontalAlignment="Center"
				 Width="250"
				 BorderThickness="0" />
	</Grid>
</UserControl>
